<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>
        <div class="div1" id="div2" name="div3">
            我是div标签
            <p>我是p标签</p>
            <span>我是span标签</span>
        </div>
    </h1>

    <h2>

    </h2>

    <script>
        var oDiv = document.querySelector('div');

        var oH2 = document.querySelector('h2');
        // 直接写入 oH2  h1标签中就没有div
        // 一个标签对象 只能写入到一个位置中
        // oH2.appendChild( oDiv );

        // 克隆复制一个 div标签对象
        var oDivClone = oDiv.cloneNode(true);
        // 将克隆复制的div标签对象 写入到 h2标签中
        oH2.appendChild( oDivClone );


    </script>

    <script>
        /*
            节点的克隆
                可以复制克隆一个标签节点

                var 变量 = 标签对象.cloneNode();
                    只克隆标签本身 不克隆标签内容

                var 变量 = 标签对象.cloneNode(true);
                    标签本身 标签内容 都克隆

            节点操作必须掌握的:
                创建节点 
                通过DOM操作设定节点
                写入节点
                克隆节点
                删除节点
        */
    </script>
</body>
</html>